	<template>
  <div
    class="all"
    :style="{ height: screenHeight + 'px', width: screenWidth + 'px' }"
  >
    <Return txt="聊天背景"></Return>
    <div class="list" @click="fileClick()">
      <div class="listOne">
        <span>从手机相册选择</span>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="list"  @click="yingyongTap">
      <div class="listOne">
        <span>拍一张</span>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="msg" @click="yingyongTap">将背景应用到所以聊天场景</div>
    <van-overlay
      :show="show"
      @click="show = false"
      style="background: rgba(30, 30, 30, 0.5)"
    >
      <div class="wrapper" @click.stop>
        <div class="block">
          <div class="blockOne block1">将背景应用到所有聊天场景</div>
          <div class="blockOne" @click="show = false">取消</div>
        </div>
      </div>
    </van-overlay>
    <input id="upload_file" type="file" style="display: none;" accept='image/*' name="file"  @change="fileChange($event)"/>
  </div>
</template>
<script>
import Return from "../../components/return";
import $ from 'jquery';
export default {
  components: {
    Return,
  },
  data() {
    return {
      screenWidth: window.innerWidth,
      screenHeight: window.innerHeight,
      show: false,
    };
  },
  methods: {
    returnTap() {
      this.$router.go(-1);
    },
    yingyongTap() {
      this.show = true;
    },
    bianjiTap() {
      //   this.$router.push("/gongaoedit");
    },
    fileClick() {
          $('#upload_file').click();
 
        },
        //调用手机摄像头并拍照
        getImage() {
          let cmr = plus.camera.getCamera();
          cmr.captureImage(function(p) {
            plus.io.resolveLocalFileSystemURL(p, function(entry) {
              compressImage(entry.toLocalURL(),entry.name);
            }, function(e) {
              plus.nativeUI.toast("读取拍照文件错误：" + e.message);
            });
          }, function(e) {
          }, {
            filter: 'image'
          });
        },
        //从相册选择照片
        galleryImgs() {
          plus.gallery.pick(function(e) {
            let name = e.substr(e.lastIndexOf('/') + 1);
            compressImage(e,name);
          }, function(e) {
          }, {
            filter: "image"
          });
        },
        //点击事件，弹出选择摄像头和相册的选项
        showActionSheet() {
          //  this.galleryImgs();
          let bts = [{
            title: "拍照"
          }, {
            title: "从相册选择"
          }];
          plus.nativeUI.actionSheet({
              cancel: "取消",
              buttons: bts
            },
            function(e) {
              if (e.index == 1) {
                this.getImage();
              } else if (e.index == 2) {
               
              }
            }
          );
        },
        fileChange(el) {
          this.files=$("#upload_file").get(0).files;
          console.log(this.files.length);
          for(let i=0;i<this.files.length;i++){
            this.datas.append("file",this.files[i]);
          }
          this.show1=false;
          console.log(typeof this.files);
          console.log(this.files);
          if (!el.target.files[0].size) return;
          this.fileList(el.target);
          el.target.value = ''
        },
        fileList(fileList) {
          let files = fileList.files;
          for (let i = 0; i < files.length; i++) {
            //判断是否为文件夹
            if (files[i].type != '') {
              this.fileAdd(files[i]);
            } else {
              //文件夹处理
              this.folders(fileList.items[i]);
            }
          }
        },
        //文件夹处理
        folders(files) {
          let _this = this;
          //判断是否为原生file
          if (files.kind) {
            files = files.webkitGetAsEntry();
          }
          files.createReader().readEntries(function (file) {
            for (let i = 0; i < file.length; i++) {
              if (file[i].isFile) {
                _this.foldersAdd(file[i]);
              } else {
                _this.folders(file[i]);
              }
            }
          })
        },
        fileAdd(file) {
          //总大小
          this.size = this.size + file.size;
          //判断是否为图片文件
          if (file.type.indexOf('image') == -1) {
            file.src = 'wenjian.png';
            this.imgList.push({
              file
            });
          } else {
            let reader = new FileReader();
            reader.vue = this;
            reader.readAsDataURL(file);
            reader.onload = function () {
              file.src = this.result;
              this.vue.imgList.push({
                file
              });
            }
          }
        },
        fileDel(index) {
          this.size = this.size - this.imgList[index].file.size;//总大小
          this.imgList.splice(index, 1);
        },
        bytesToSize(bytes) {
          if (bytes === 0){
            return '0 B';
          }
          let k = 1000, // or 1024
            sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
            i = Math.floor(Math.log(bytes) / Math.log(k));
          return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
        },
        dragenter(el) {
          el.stopPropagation();
          el.preventDefault();
        },
        dragover(el) {
          el.stopPropagation();
          el.preventDefault();
        },
        drop(el) {
          el.stopPropagation();
          el.preventDefault();
          this.fileList(el.dataTransfer);
        },
        shows(et,tx){
          this.strut=et;
          this.txt=tx;
        },
        handleClick(){
          this.$store.commit('add')
        },

  },
};
</script>
<style scoped>
.top {
  height: 60px;
  width: 90%;
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 60px;
  position: relative;
  background: #eeeeee;
}
.all {
  background: #eeeeee;
}
.listOne {
  background: #fff;
  height: 50px;
  width: 92%;
  padding: 0 4%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eeeeee;
}
.msg {
  margin-top: 40px;
  background: #fff;
  height: 50px;
  width: 92%;
  padding: 0 4%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.block {
  height: 140px;
  width: 100%;
  position: fixed;
  right: 0px;
  bottom: 0px;
  z-index: 100;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  z-index: 999;
}
.blockOne {
  height: 68px;
  width: 100%;
  text-align: center;
  line-height: 68px;
}
.block1 {
  border-bottom: 1px solid #bebebe;
  color: red;
}
</style>